<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>黄金价格计算器</title>
    <!-- 使用 CDN 引入 Vue 3 -->
    <script src="js/vue.js"></script>
</head>
<style>
    body {
        background-color: #f5f5f5;
    }

    #app {
        background-color: #fff;
        width: 400px;
        /* border: 1px solid #999; */
        margin: 10px auto;
        padding: 20px;
        box-shadow: 0 0 10px 1px #999;
    }

    label {
        font-size: 20px;
    }

    input {
        height: 35px;
        margin: 10px;
        border: 2px solid #999;
        border-radius: 3px;
        padding: 0 10px;
        outline: none;
        font-size: 16px;
    }

    span {
        color: red;
        font-weight: 600;
    }

    p {
        font-size: 18px;
        line-height: 45px;
        color: #666;
    }

    i {
        color: blue;
    }
</style>

<body>
    <div id='app'>
        <h3 align='center'>黄金价格计算器</h3>
        <label>买入单价：</label>
        <input v-model.number="in_price" type="number">
        <span>元/克</span> <br>
        <label>卖出单价：</label>
        <input v-model.number="out_price" type="number">
        <span>元/克</span> <br>
        <label>手续费率：</label>
        <input v-model.number="rate" type="number">
        <span>%</span> <br>
        <label>购买数量：</label>
        <input v-model.number="number" type="number">
        <span>克</span> <br>
        <hr>
        <p>
            成本价： <i>{{ cost_price }}</i> <br>
            卖出价：<i>{{ sell_price }}</i><br>
            手续费：<i>{{ handling_fee }}</i><br>
            赎回获得：<i>{{ redemption_amount }}</i><br>
            净收入：<i>{{ net_income }}</i>
        </p>
        <hr>
        人民币： <input type="number" v-model.number="cny" /> <br>
        <b>美元：</b> <i>{{ usd }}</i><br>
        <b>欧元：</b> <i>{{ eur }}</i><br>
        <b>日元：</b> <i>{{ jpy }}</i><br>
        <b>韩元：</b> <i>{{ krw }}</i><br>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    in_price: 0,
                    out_price: 0,
                    rate: 0,
                    number: 0,
                    cny: 0,
                    // 假设的汇率，实际使用时需要动态获取最新汇率
                    usdRate: 0.14,
                    eurRate: 0.13,
                    jpyRate: 19.24,
                    krwRate: 186.56
                };
            },
            computed: {
                // 成本价 = 买入单价 * 购买数量
                cost_price() {
                    return (this.in_price * this.number).toFixed(2);
                },
                // 卖出价 = 卖出单价 * 购买数量
                sell_price() {
                    return (this.out_price * this.number).toFixed(2);
                },
                // 手续费 = 卖出价 * 手续费率 / 100
                handling_fee() {
                    return (this.sell_price * this.rate / 100).toFixed(2);
                },
                // 赎回获得 = 卖出价 - 手续费
                redemption_amount() {
                    return (this.sell_price - this.handling_fee).toFixed(2);
                },
                // 净收入 = 赎回获得 - 成本价
                net_income() {
                    return (this.redemption_amount - this.cost_price).toFixed(2);
                },
                // 计算美元兑换金额
                usd() {
                    return (this.cny * this.usdRate).toFixed(2);
                },
                // 计算欧元兑换金额
                eur() {
                    return (this.cny * this.eurRate).toFixed(2);
                },
                // 计算日元兑换金额
                jpy() {
                    return (this.cny * this.jpyRate).toFixed(2);
                },
                // 计算韩元兑换金额
                krw() {
                    return (this.cny * this.krwRate).toFixed(2);
                }
            }
        }).mount('#app');
    </script>
</body>

</html>